<!-- home -->
<template>
  <div class="index-container">
    <van-icon name="wap-nav" class="menu" is-link @click="showPopup" />
    <div class="loading-wrap" v-show="menuConfig[active].loading && menuConfig[active].auth">
      <!-- <van-loading size="24" vertical>Loading</van-loading> -->
    </div>
    <van-popup
      v-model="show"
      position="right"
      closeable
      :style="{ height: '100%', width: '90%' }"
      close-icon="cross"
      class="popupContent"
    >
      <site-map @navigateto="handleNavigateto"></site-map>
    </van-popup>
    <van-tabs v-model="active">
      <van-tab v-for="(menu, index) in menuConfig" :title="menu.title" :key="index">
        <div class="report-div" v-if="menu.auth">
          <div class="filter-div" v-if="menu.showFilter">
            <DropdpwnMenu></DropdpwnMenu>
            <DateSearch @switchPeriod="switchPeriod"></DateSearch>
          </div>
          <iframe
            :id="`iframe_${index}`"
            @load="iframeLoaded"
            :src="iframes[index]"
            frameborder="0"
            v-if="iframes[index]"
            :class="menu.showFilter ? 'inner' : ''"
          ></iframe>
        </div>
        <no-data v-else :isNoData="menu.isNoData" :desc="menu.isNoData ? '暂无数据' : '暂无数据权限'"></no-data>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import DropdpwnMenu from '@/components/DropdownMenu'
import DateSearch from '@/components/DateSearch'
import NoData from '@/components/NoData'
import SiteMap from './SiteMap'

import { getIframeAddress } from '@/utils'

export default {
  components: {
    DropdpwnMenu,
    DateSearch,
    SiteMap,
    NoData
  },
  data() {
    return {
      show: false,
      active: 0,
      loading: true,
      actionShow: false,
      actionShow1: false,
      downShow: false,
      downShow1: false,
      iframes: [],
      iframes_loaded: [],
      temp: '',
      bc: null,
      menuConfig: [
        { title: '预算考核', dateLevel: 1, auth: true, loading: true },
        { title: '个险业务', showFilter: true, dateLevel: 2, auth: true, loading: true },
        { title: '个险队伍', showFilter: true, dateLevel: 3, auth: true, loading: true },
        { title: '团险经营', showFilter: true, dateLevel: 4, auth: false, loading: true, isNoData: true },
        { title: '团险队伍', showFilter: true, dateLevel: 5, auth: false, loading: true },
        { title: '运营科技', showFilter: true, dateLevel: 5, auth: false, loading: true },
        { title: '共享后援', showFilter: true, dateLevel: 5, auth: false, loading: true },
        { title: '费用结构', showFilter: true, dateLevel: 5, auth: false, loading: true },
        { title: '财务简报', showFilter: true, dateLevel: 5, auth: false, loading: true }
      ],
      mainiframes: [
        'http://21.50.131.35:37799/webroot/decision/url/mobile#/report?title=%E9%A2%84%E7%AE%97%E8%80%83%E6%A0%B8&id=bb0ed549-d7c6-48f1-97b0-842a0f649ada&showType=2&__pi__=false',
        'http://21.50.131.35:37799/webroot/decision/url/mobile#/report?title=%E4%B8%AA%E9%99%A9%E4%B8%9A%E5%8A%A1&id=446a4866-2942-4bb8-99fa-6e33ff3aaf8e&showType=2&__pi__=false',
        'http://21.50.131.35:37799/webroot/decision/url/mobile#/report?title=%E4%B8%AA%E9%99%A9%E9%98%9F%E4%BC%8D&id=478ef03d-ce35-4d5c-b6ae-b6a419d6a955&showType=2&__pi__=false'
      ],
      testiframes: [
        'https://datastudio-sit.cpic.com.cn/webroot/decision/view/report?viewlet=%25E9%2595%25BF%25E8%2588%25AA%25E9%25A9%25BE%25E9%25A9%25B6%25E8%2588%25B1%252F%25E9%25A2%2584%25E7%25AE%2597%25E8%2580%2583%25E6%25A0%25B8.cpt&op=h5&__pi__=false',
        // 'https://datastudio-sit.cpic.com.cn/webroot/decision/url/mobile#/report?id=90793449-486b-452d-8ab1-0e7faa7e533d&showType=2',
        'https://datastudio-sit.cpic.com.cn/webroot/decision/view/report?viewlet=%25E9%2595%25BF%25E8%2588%25AA%25E9%25A9%25BE%25E9%25A9%25B6%25E8%2588%25B1%252F%25E4%25B8%25AA%25E9%2599%25A9%25E4%25B8%259A%25E5%258A%25A1.cpt&op=h5&__pi__=false',
        'https://datastudio-sit.cpic.com.cn/webroot/decision/view/report?viewlet=%25E9%2595%25BF%25E8%2588%25AA%25E9%25A9%25BE%25E9%25A9%25B6%25E8%2588%25B1%252F%25E4%25B8%25AA%25E9%2599%25A9%25E9%2598%259F%25E4%25BC%258D.cpt&op=h5&__pi__=false&period=2'
      ]
    }
  },

  computed: {},
  created() {
    // 测试对接信息： system=TestSys  总分公司测试用户 HeadOffice/AreaOffice
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
    const tem = []
    for (let index = 0; index < this.testiframes.length; index++) {
      tem.push(getIframeAddress('yaoxin', this.testiframes[index]))
      // tem.push(this.testiframes[index].replace('https://datastudio-sit.cpic.com.cn/', 'http://29.23.39.223:37799/'))
    }
    this.iframes = tem
    this.iframes_loaded = [false, false, false]
  },
  mounted() {
    // 接收跨域信息
    // window.parent.postMessage({'action': 'open', 'targetCode': 'bphlt_sanum_ma_y', topic: 'manpower', id: '', dateType: 'year'}, '*');
    /**
      topic(指标)：perf绩效 fin表示财务 manpower人力
      dateType(时间过滤)：year当前年
      id(点击目标id):点击当前目标，拿到当前目标id传递
       -- source():表示来源于哪个表(模型)  删除
      targetCode:指标值
    */
    // window.parent.postMessage({'action': 'noauth'}, '*');
    // window.parent.postMessage({'action': 'nodata'}, '*');
    // window.parent.postMessage({'action': 'tips', 'targetCode': 'income'}, '*');
    window.addEventListener('message', e => {
      console.log('Home 页接收到数据：', e.data)
      if (e.data) {
        switch (e.data.action) {
          case 'noauth':
            this.handleNoAuth()
            break
          case 'open':
            this.handleGotoDetail(e.data)
            break
          case 'tips':
            this.handleShowTips()
            break
          default:
            break
        }
      }
    })
  },
  destroyed() {
    window.removeEventListener('message', {})
  },
  methods: {
    showPopup() {
      this.show = true
    },
    sendInfo(prarms) {
      var sonIframe = document.getElementById(`iframe_${this.active}`)
      // 自动定位功能，{ action: 'scrollto', target: 'zb_nbql' }
      // const t = { action: 'scrollto', target: 'zb_nbql' }
      sonIframe.contentWindow.postMessage(prarms, '*')
    },
    handleNoAuth() {
      this.$set(
        this.menuConfig,
        this.active,
        Object.assign(this.menuConfig[this.active], { auth: false, loading: false })
      )
    },
    /** 打开下钻页面 */
    handleGotoDetail(data) {
      const q = `topic=${data.topic}&dateType=${data.dateType}&id=${data.id}&targetCode=${data.targetCode}`
      if (this.$isDD) {
        this.$dd.ready(() => {
          this.$dd.biz.util.openLink({
            url: location.origin + '/detail?dd_nav_bgcolor=FF0b144b&showmenu=false&' + q,
            onSuccess: result => {
              console.log('通过dd.biz.util.openLink打开页面！', result)
            },
            onFail: err => {
              console.log(err)
            }
          })
        })
      } else {
        this.$router.push(`/detail?${q}`)
      }
    },
    /** TODO 展示指标含义的提示信息 */
    handleShowTips() {},
    iframeLoaded() {
      console.log('iframe loaded!', this.active)

      this.$set(this.menuConfig, this.active, Object.assign(this.menuConfig[this.active], { loading: false }))
      this.$nextTick(() => {
        if (this.bc) {
          setTimeout(() => {
            this.sendInfo(this.bcparams)
            this.bc = null
            this.bcparams = null
          }, 2000)
        }
      })
    },
    handleNavigateto(index, id) {
      this.show = false
      this.active = index
      if (this.iframes_loaded[index]) {
        this.$nextTick(() => {
          this.sendInfo({ action: 'scrollto', target: id })
        })
      } else {
        this.bc = true
        this.bcparams = { action: 'scrollto', target: id }
      }
    },
    switchPeriod(type) {
      console.log('日月年切换:', type)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      this.temp = getIframeAddress(
        'yaoxin-011',
        'http://21.50.131.35:37799/webroot/decision/view/report?op=h5&viewlet=%25E9%2595%25BF%25E8%2588%25AA%25E9%25A9%25BE%25E9%25A9%25B6%25E8%2588%25B1%252F%25E4%25B8%25AA%25E9%2599%25A9%25E9%2598%259F%25E4%25BC%258D.cpt&__pi__=false&period=' +
          type
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  position: relative;
  height: 100%;
  .loading-wrap {
    position: absolute;
    background-color: $main-bc;
    z-index: 100;
    width: 100%;
    height: calc(100% - 40px);
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu {
    position: fixed;
    right: 0px;
    z-index: 1;
    padding: 10px;
    font-size: 20px;
    background-color: #171746;
    box-shadow: -10px -10px 12px #171746;
  }

  /deep/.van-tabs {
    height: 100%;
    .van-tabs__wrap {
      padding-right: 40px;
      .van-tabs__nav {
        background-color: #171746;
        .van-tab {
          color: #9497af;
          height: 100%;
          &.van-tab--active {
            color: #fff;
          }
        }
        .van-tabs__line {
          background-color: #fff;
        }
      }
    }
    .van-tabs__content {
      height: calc(100% - 1.17333rem);
      .van-tab__pane {
        height: 100%;
        .report-div {
          height: 100%;
          .filter-div {
            display: flex;
            justify-content: space-between;
            padding: 8px 20px;
          }
          iframe {
            width: 100%;
            height: 100%;
            &.inner {
              background-color: $main-bc;
              height: calc(100% - 46px);
            }
          }
        }
      }
    }
  }
}

/deep/.popupContent {
  width: 100%;
  height: 100vh;
  background-color: $blue2;
}
</style>
